import { genChartByAiAsyncMqUsingPost } from '@/services/shanbi/chartController';
import { useModel } from '@@/exports';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Card, Col, Form, Input, Row, Space, Upload, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import React, { useState } from 'react';
import {updateUser} from "@/services/swagger/user";
import {updateUserByUserUsingPost} from "@/services/shanbi/userController";

const UserInfo: React.FC = () => {
  const [form] = useForm();
  const [submitting, setsubmintting] = useState<boolean>(false);
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const onFinish = async (values: any) => {
    //避免重复提交
    if (submitting) {
      return;
    }
    setsubmintting(true);
    // console.log('用户保存内容: ', values);
    const params = {
      ...values,
      file: undefined,
    };
    try {
      const res = await updateUserByUserUsingPost(params, {}, values.file.file.originFileObj);
      if (!res?.data) {
        message.error('上传失败');
      } else {
        message.success('上传成功，请刷新页面查看');
        form.resetFields();
      }
    } catch (e: any) {
      message.error('上传失败，' + e.message);
    }
    setsubmintting(false);
  };
  const uploadButton = (
    <button style={{ border: 0, background: 'none' }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );

  return (
    <div className="add-chart">
      <Row gutter={24}>
        <Col span={12}>
          <Card title={'用户信息'}>
            <Form
              form={form}
              name="addChart"
              labelAlign="left"
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 16 }}
              onFinish={onFinish}
              initialValues={{}}
            >
              <Form.Item name="file" label="用户头像">
                <Upload name="file" listType="picture-card" showUploadList={true} maxCount={1}>
                  {imageUrl ? (
                    <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
                  ) : (
                    uploadButton
                  )}
                </Upload>
              </Form.Item>
              <Form.Item name="username" label="用户名称">
                <Input defaultValue={currentUser?.userName} />
              </Form.Item>
              <Form.Item wrapperCol={{ span: 12, offset: 4 }}>
                <Space>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={submitting}
                    disabled={submitting}
                  >
                    提交
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default UserInfo;
